<!DOCTYPE html>
<html lang="zh-en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>全栈自学社区搜索</title>
    <link rel="stylesheet" th:href="@{/css/my.css}">
</head>
<body>

<div id="app">
    <div id="mallSearch">
        <form name="searchTop">
            <input type="text" autocomplete="off" aria-haspopup="true" v-model="keyword" placeholder="名称">
            <button type="submit" @click.prevent="searchKey" id="searchbtn">搜索</button>
        </form>
    </div>

    <!-- 商品详情 -->
    <div class="container">

        <div class="product" v-for="result in results">

            <div class="product-sale">促销</div>

            <img :src="result.img" class="product-image"/>

            <div class="product-name">
                <a v-html="result.title"></a>
<!--                {{result.title}}-->
            </div>

<!--            <div class="product-desc">-->
<!--                一亿像素夜景相机，120Hz六档变速高...-->
<!--            </div>-->

            <div class="product-price">
                {{result.price}}
            </div>

            <div class="product-buy">
                购买
            </div>

        </div>

    </div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/xzMhehe/StaticFile_CDN@main/static/axios.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/xzMhehe/StaticFile_CDN@main/static/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword: '', //搜索关键字
            results: []
        },
        methods: {
            searchKey() {
                var keyword = this.keyword;
                console.log(keyword);
                // 对接后端接口
                axios.get('/search/' + keyword + '/1/' + '10').then(response => {
                    console.log(response);
                    this.results = response.data;  // 绑定数据
                })
            }
        }
    })
</script>

</body>
</html>